import style from "./App.module.scss"
import { Route, Routes } from "react-router-dom";
import Index from "./pages/Index";
import Login from "./pages/Login";
import Find from "./pages/Find";
import Book from "./pages/Book";
import Listen from "./pages/Listen";
import Mine from "./pages/Mine";
import Allfenlei from "./pages/Allfenlei";
import Bookxq from "./pages/Bookxq";
import Bookdan from "./pages/Bookdan";
import {SoundOutline} from "antd-mobile-icons"
import { useSelector, useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { useLocation,useParams } from "react-router-dom";
import { CloseOutline } from "antd-mobile-icons";
import {seturl} from "./store/music"
 let App = () => {
  let url=useSelector((state:any)=>state.musicSlice.url);
  let nav=useNavigate();
  let local=useLocation();
  let params=useParams();
  let dispatch=useDispatch()
  return (
    <div style={{ position: "relative" }}>
      <div
        className={style.font}
        style={{
          position: "fixed",
          bottom: "60px",
          zIndex: "10000000",
          display: url ? "block" : "none",
        }}
        onClick={() => nav("/listen")}
      >
        <SoundOutline />
      </div>
      <div
        className={style.yin}
        style={{
          display: url && local.pathname == "/listen" ? "block" : "none",
        }}
      >
        <audio src={url} controls autoPlay></audio>
        <span onClick={()=>dispatch(seturl(""))}>
          <CloseOutline />
        </span>
      </div>
      <Routes>
        <Route path="/" element={<Index></Index>}>
          <Route path="" element={<Find />}></Route>
          <Route path="book" element={<Book />}></Route>
          <Route path="listen" element={<Listen />}></Route>
          <Route path="mine" element={<Mine />}></Route>
        </Route>
        <Route path="/login" element={<Login></Login>}></Route>
        <Route path="/all" element={<Allfenlei></Allfenlei>}></Route>
        <Route path="/bookxq/:id" element={<Bookxq></Bookxq>}></Route>
        <Route path="/bookdan/:id" element={<Bookdan></Bookdan>}>

        </Route>
      </Routes>
    </div>
  );
};
export default App;
